<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>使用循环创建节点</title>
</head>
<body>
<div id="change" class="change">
    <ul>
        <!--将重复的部分使用 循环 进行处理-->
        <!--item 是自定义标识符，-->

        <li data-for="item in arr">{{ item }}</li>
    </ul>
</div>

<script>
    let arr = ["张三", "李四", "王五", "赵六", "孙七"]

    let parent = document.querySelector("#change ul");
    let element = document.querySelector("#change li");

    let attributeNames = element.getAttributeNames();
    for (let i = 0; i < attributeNames.length; i++) {
        if (attributeNames[i] === "data-for") {
            let attributeValue = element.getAttribute(attributeNames[i]);
            // console.log(attributeValue);

            let strings = attributeValue.split(" ");
            // console.log(strings[strings.length-1]);
            //
            // console.log(eval(strings[strings.length - 1]));


            for (let item of eval(strings[strings.length - 1])) {
                // 迭代创建新的元素
                let htmlElement = document.createElement(element.tagName);
                // console.log(htmlElement);
                // let item = evalElement
                // let strings[0]" = evalElement
                htmlElement.innerText = eval(element.innerText)

                console.log(htmlElement);
                parent.appendChild(htmlElement)
            }
        }
    }
    // 删除原有的占位元素
    element.remove()
</script>
</body>
</html>